<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>

<div id="app">

    <template>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="品牌名称">
                <el-input v-model="queryForm.brandName" placeholder="品牌名称"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="queryForm.companyName" placeholder="企业名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="queryForm.status" placeholder="状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuerySubmit">查询</el-button>
                <el-button @click="resetForm('queryForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row>

            <el-button type="primary" size="mini" @click="handlAdd">新增</el-button>
            <el-button type="danger" size="mini" @click="handlBatchDelete">批量删除</el-button>
        </el-row>

        <el-table

                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    type="index"
                    label="序号"
            >
            </el-table-column>

            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <span>{{scope.row.status == '1' ? '启用' : '禁用'}}</span>
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog :title="title" :visible.sync="dialogFormVisible" >

            <el-form :model="brandForm">
                <el-form-item label="品牌名称" :label-width="formLabelWidth">
                    <el-input v-model="brandForm.brandName"></el-input>
                </el-form-item>

                <el-form-item label="企业名称" :label-width="formLabelWidth">
                    <el-input v-model="brandForm.companyName"></el-input>
                </el-form-item>

                <el-form-item label="排序" :label-width="formLabelWidth">
<!--                    <el-input v-model="brandForm.ordered"></el-input>-->

                    <el-input-number v-model="brandForm.ordered"  :min="1" :max="1000" ></el-input-number>
                </el-form-item>

                <el-form-item label="品牌介绍" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="2"
                              placeholder="请输入内容" v-model="brandForm.description"></el-input>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="brandForm.status" placeholder="请选择活动区域">
                        <el-option label="启用" value="1" ></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </template>

</div>
</body>
<script>

    new Vue({
        el: '#app',
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleEdit(index, row) {

                this.brandForm = {
                    id: '',
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    description: '',
                    status: ''
                }

                this.title = '编辑'

                //先查询编辑的品牌信息
                // 发送查询
                axios({url: '/brand-case/brand/get?id=' + row.id, method: 'GET'}).then((resp) => {

                    this.brandForm = resp.data

                })

                this.dialogFormVisible = true


                console.log(index, row);
            },
            //删除按照ID
            handleDelete(id) {

                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送删除请求
                    axios({url: '/brand-case/brand/delete?id=' + id, method: 'get'})
                        .then((resp) => {
                            if (resp.data == "OK") {
                                //重新加载数据
                                this.getBrandAll()

                                this.$message(
                                    {

                                        message: '删除成功',
                                        type: 'success'
                                    })
                            } else {

                                this.$message(
                                    {

                                        message: '操作失败',
                                        type: 'error'
                                    })
                            }
                        })
                })


            },
            //查询数据列表
            getBrandAll() {

                axios(
                    {
                        url: '/brand-case/brand/queryAll?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize,
                        method: 'post',
                        data: this.queryForm

                    }).then((resp) => {

                    this.tableData = resp.data.rows
                    this.total = resp.data.total
                })
            },
            //分页
            handleSizeChange(val) {

                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.getBrandAll()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val
                this.getBrandAll()
            },
            onQuerySubmit() {
                console.log('submit!');
                this.getBrandAll()
            },
            resetForm(formName) {


                this.queryForm = {
                    brandName: '',
                    companyName: '',
                    status: ''
                }


                this.getBrandAll()
            },
            handleSelectionChange(val) {


                for (let i = 0; i < val.length; ++i) {
                    this.brandIds[i] = val[i].id
                }

                console.log("this.brandIds==", this.brandIds)

            },
            handlBatchDelete() {

                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //发送删除请求
                    axios(
                        {
                            url: '/brand-case/brand/batchDelete',
                            method: 'post',
                            data: this.brandIds

                        })
                        .then((resp) => {

                            if (resp.data == "OK") {

                                //重新加载数据
                                this.getBrandAll()

                                this.$message(
                                    {

                                        message: '删除成功',
                                        type: 'success'
                                    })
                            } else {

                                this.$message(
                                    {

                                        message: '操作失败',
                                        type: 'error'
                                    })
                            }
                        })
                })

            },

            //新增
            handlAdd() {
                this.brandForm = {
                    id: '',
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    description: '',
                    status: ''
                }

                this.title = '新增'
                this.dialogFormVisible = true

            },

            //提交表单
            submitForm() {

                //第一步 绑定
                axios({url: '/brand-case/brand/addOrUpdate',
                    method: 'POST',
                    data: this.brandForm}).then(

                        (resp) => {

                            console.log(resp.data)

                        if (resp.data.success == true)
                        {


                               this.$message(
                                {

                                    message: '操作成功',
                                    type: 'success'
                                })

                            this.dialogFormVisible = false
                            this.getBrandAll()

                        } else {

                            this.$message(
                                {

                                    message: '操作失败',
                                    type: 'error'
                                })
                        }
                    }
                )


            }


        },
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                pageSizes: [10, 20, 30, 50],
                total: 34,
                queryForm: {
                    brandName: '',
                    companyName: '',
                    status: ''
                },
                brandForm: {
                    id: '',
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    description: '',
                    status: ''
                },
                brandIds: [],
                dialogFormVisible: false,
                title: '新增',
                formLabelWidth:'120px'
            }
        },
        mounted() {
            this.getBrandAll()
        }
    })

</script>
</html>